<template>
  <div class="Bar">
    <h1>Bar</h1>
		<h1>{{ counter }}, global: {{ count }}</h1>
		<h2>{{ counterF }}, global getters: {{ count100 }}</h2>
		<button @click="SET_COUNTER">counter--</button>
		<button @click="jian">counter--</button>
		<hr>
		<h1>{{ $store.state.co1.counter }}</h1>
		<h1>{{ $store.getters["co1/counterFixed"] }}</h1>
		<button @click="$store.commit('co1/SET_COUNTER')">counter--</button>
		<button @click="$store.dispatch('co1/counterJian')">counter--</button>
		
		<!-- <h1>{{ $store.getters.counterFixed }}</h1> -->
		<!-- <button @click="$store.commit('SET_COUNTER')">counter--</button> -->
  </div>
</template>

<script>
import { 
	mapState,
	mapGetters,
	mapMutations,
	mapActions
} from "vuex"
	
export default {
  name: "Bar",
	computed: {
		...mapState(["count"]),
		...mapGetters({ count100: "count100" }),
		// 获取co1模块内的state & getters
		...mapState("co1", ["counter"]),
		...mapGetters("co1", { counterF: "counterFixed" })
	},
	// ...map*("模块名", ["xxx"])
	created() {
		console.log(this.$store)
	},
	methods: {
		...mapMutations("co1", ["SET_COUNTER"]),
		...mapActions("co1", { jian: "counterJian" })
	}
}
</script>
